<script setup lang="ts">
    import Test from './test.vue'
</script>
<template>
    <ul class="tabs">
        <li class="tabItem">
            <Test></Test>
        </li>
    </ul>
    <pre>
        1. v-for + v-if
            v2先执行 v-for 再执行 v-if
            v3先执行 v-if 再执行 v-for
        
        2. v-for + template
            v2不能在template上面写key
            v3可以在template上面写key

        3. v-for + key
            不绑定key值时当数据项的顺序或长度改变时，Vue 不会随之移动 DOM 元素的顺序，
            而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

            绑定唯一key时当数据项的顺序或长度改变时，Vue会重用和从新排序现有的元素位置或创建新的dom
            
    </pre>
</template>